﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SearchDemo.aspx.cs" Inherits="GeoWeb.Demo.GeoFullTextSearch.SearchDemo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>项目检索</title>
    <link href="themes/global_v1.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="JS/jquery-1.7.1.min.js"></script>


    <style type="text/css">
        .suggestionsBox {
        position:absolute;        
        margin: 0px 0px 0px 0px;
        width: 230px;
        background-color:#CFEDF2;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border: 2px solid #A1DCE6;    
        color: #005968;
        filter:Alpha(opacity=0.8);
        -moz-opacity:0.8;
        opacity:0.8;
        line-height:18px;
        left:15px !importent;
        margin-top:22px !importent;        
    }
    
    .suggestionList {
        margin: 0px;
        padding: 0px;
    }    
    .suggestionList li {
        margin: 0px 0px 3px 0px;
        padding: 3px;
        cursor: pointer;
        list-style:none;
    }
    .suggestionList li:hover {
        background-color:gray; 
    }
    .search_box
    {
        background-color: bisque;	
    }
    .search .button
    {
    	background-color: burlywood;	
    }
    .search input
    {
    	color:rgb(22, 9, 9);
    	}
    </style>

    <script type="text/javascript" language="javascript">
        //高亮的索引#FAFFB1            
        var highLightIndex = -1;
        //超时的标识（对用户连续快速按下键盘的事件做延时处理，只对用户在500ms内最后一次请求，让其生效）   
        var timeoutId;
        $(document).ready(function () {
            init();
            $('#SearchText').bind('keyup', processKeyup);
            $("#auto_div").width($("#SearchText").width() + 12);
            $('#SearchText').blur(function () {
                $('#auto_div').hide();
            });
        });


        function processAjaxRequest_search() {
            $.ajax({
                type: "post",       //http请求方法,默认:"post"   
                url: "SearchDemo.aspx",   //发送请求的地址   
                data: "queryString=" + $('#SearchText').val(),
                dataType: "text",   //预期服务器返回的数据类型   
                success: processAjaxResponse_search
            });
        }
        function processAjaxResponse_search(data) {
            var words = data.split("&");
            $('#title').html(words[0]);
            //$('#content').html(words[1]);
            document.getElementById('content').innerHTML = words[1];
        }


        /**   
        * 处理键盘按下后弹起的事件   
        * @param event   
        */
        function processKeyup(event) {
            var myEvent = event || window.event;
            var keyCode = myEvent.keyCode;
            //输入是字母，或者退格键则需要重新请求   
            if ((keyCode >= 48 && keyCode <= 90) || keyCode == 8) {
                highLightIndex = -1;
                clearTimeout(timeoutId);
                timeoutId = setTimeout(processAjaxRequest, 500);
                //处理上下键(up,down)   
            } else if (keyCode == 38 || keyCode == 40) {
                processKeyUpAndDown(keyCode);
                //按下了回车键   
            } else if (keyCode == 13) {

                processEnter();
            }
        }

        /***   
        * 初始化弹出框列表的位置，大小   
        */
        function init() {
            $('#auto_div').hide();
            var pos = $('#SearchText').position();
        }

        /**   
        * 处理Ajax请求   
        * @param data   
        */
        function processAjaxRequest() {
            $.ajax({
                type: "post",       //http请求方法,默认:"post"   
                url: "AutoSuggestion.ashx",   //发送请求的地址   
                data: { queryString: $('#SearchText').val() },
                dataType: "text",   //预期服务器返回的数据类型   
                success: processAjaxResponse
            });
        }

        /**   
        * 处理Ajax回复   
        * @param data Ajax请求得到的返回结果为dom文档对象   
        */
        function processAjaxResponse(data) {
            $('#auto_div').html('').show();
            var words = data.split("&");
            for (var i = 0; i < words.length; i++) {
                //  var newDivNode=$("<div>").attr("id",i);
                // newDivNode.html(words[i].trim()).appendTo($('#auto_div'));

                var word_div = $('<div></div>').attr("id", i);
                word_div.html(words[i]);
                word_div.hover(fnOver, fnOut);
                word_div.click(getAutoText);
                $('#auto_div').append(word_div);
            }
        }
        /**   
        * 处理鼠标滑过   
        */
        function fnOver() {
            changeToWhite();
            $(this).css('background-color', '#bad3df');
            highLightIndex = $(this).attr("id");
            //就是鼠标移动时，跟着改变搜索框的内容   
            $('#SearchText').val($('#auto_div').children().eq(highLightIndex).html());
        }

        /**   
        * 处理鼠标移除   
        */
        function fnOut() {
            $(this).css('background-color', 'white');
        }

        /**   
        * 得到自动填充文本   
        */
        function getAutoText() {
            //有高亮显示的则选中当前选中当前高亮的文本  
            $('#SearchText').val($(this).html());
            $('#auto_div').html('').hide();
            highLightIndex = -1;
        }
        /**   
        * 处理按下Enter键   
        * @param keyCode   
        */
        function processEnter() {
            if (highLightIndex != -1) {
                $('SearchText').val($('#auto_div').children().eq(highLightIndex).html());
                $('#auto_div').html('').hide();
            }
        }
        /**   
        * 处理按上下键的情况   
        */
        function processKeyUpAndDown(keyCode) {
            var words = $('#auto_div').children();
            var num = words.length;
            if (num <= 0) return;
            changeToWhite();
            highLightIndex = ((keyCode != 38 ? num + 1 : num - 1) + highLightIndex) % num;
            words.eq(highLightIndex).css('background-color', '#bad3df');
            $('#SearchText').val(words.eq(highLightIndex).html());
        }

        /**   
        * 如果有高亮的则把高亮变白   
        */
        function changeToWhite() {
            if (highLightIndex != -1) {
                $('#auto_div').children().eq(highLightIndex).css('background-color', 'white');
            }
        }   
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <!--封套 开始-->
        <div class="wrap">
            <!--主区域 开始-->
            <div class="con_wrap2" style="height: 430px;" id="SeachListContent">
                <!--基本搜索 开始-->
                <div class="search_box" id="BaseSeachBox">
                    <div class="search" style="position: relative;">
                        <input type="text" id="SearchText" style="background-color: white;"  value="" autocomplete="off" />
                        <input type="button" id="SeachButton"   onclick="processAjaxRequest_search();" class="button" value=" 查 询 "/>
                        <asp:Button ID="Button1" runat="server" Text="创建索引" class="button"  OnClick="Button2_Click" />
                        <!--基本搜索 开始-->
                        <div id="auto_div" style="position: absolute; z-index: 99; top: 35px; left: 40px;
                            text-indent: 10px; border: solid #798f99 1px; border-radius: 5px; -moz-border-radius: 5px;
                            -webkit-border-radius: 5px; background-color: White;">
                        </div>
                        
                    </div>
                </div>
                <div id="title" style="height: 30px;" ></div>
                <div id="content" style="height: 430px;" ></div>
            </div>
        </div>
        
        
        <!--封套 结束-->
    </form>
</body>
</html>
